<template>
  <div>
    <div v-show="qx===1">
      <el-card class="box-card" style="width: 70%;float: left;height: 80vh">
        <div slot="header" class="clearfix">
          <el-button style="float: right" size="mini" @click="qxClick(2)">省局权限</el-button>
          <span>外省移交</span>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="send"
            label="移送状态">
            <template slot-scope="scope">
              <div v-if="scope.row.send===1">
                <el-tag type="success">未移送</el-tag>
              </div>
              <div v-if="scope.row.send === 2">
                <el-tag type="danger">已移送</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="bj"
            label="办结状态">
            <template slot-scope="scope">
              <div v-if="scope.row.bj===1">
                <el-tag type="success">未办结</el-tag>
              </div>
              <div v-if="scope.row.bj === 2">
                <el-tag type="danger">已办结</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="380">
            <template slot-scope="scope">
              <el-button @click="ys(scope.row,scope.$index)" size="mini">移送通知书</el-button>
              <el-button @click="zg(scope.row)" size="mini">整改通知书</el-button>
              <el-button @click="jc(scope.row,scope.$index)" size="mini">检测报告</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
      <el-card class="box-card" style="width: 29%;margin-left: 71%;height: 80vh">
        <div slot="header" class="clearfix">
          <span>上传</span>
        </div>
        <el-upload
          class="upload-demo"
          drag
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList"
          :on-success="successFun"
          :auto-upload="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
      </el-card>
    </div>
    <div v-show="qx===2">
      <el-card class="box-card" style="width: 100%;float: left;height: 80vh">
        <div slot="header" class="clearfix">
          <el-button style="float: right" size="mini" @click="qxClick(1)">技术机构权限</el-button>
          <span>外省移交</span>
        </div>
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="file"
            label="文件名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="send"
            label="移送状态">
            <template slot-scope="scope">
              <div v-if="scope.row.send===1">
                <el-tag type="success">未移送</el-tag>
              </div>
              <div v-if="scope.row.send === 2">
                <el-tag type="danger">已移送</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="bj"
            label="办结状态">
            <template slot-scope="scope">
              <div v-if="scope.row.bj===1">
                <el-tag type="success">未办结</el-tag>
              </div>
              <div v-if="scope.row.bj === 2">
                <el-tag type="danger">已办结</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.stauts===0">
                <el-button @click="bj(scope.row)" disabled size="mini">办结</el-button>
              </div><div v-if="scope.row.stauts===1">
                <el-button @click="bj(scope.row,scope.$index)" size="mini">办结</el-button>
              </div>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        fileList: [],
        tableData: [
          {
            name: '1',
            address: 'url',
            file: "1.doc",
            stauts: 0,
            send:1,
            bj:1
          },
          {
            name: '2',
            address: 'url',
            file: "2.doc",
            stauts: 0,
            send:1,
            bj:1
          },
          {
            name: '3',
            address: 'url',
            file: "3.doc",
            stauts: 0,
            send:1,
            bj:1
          },
        ],
        qx: 1,
      };
    },
    methods: {
      ys(row,index){
        this.tableData[index].send = 2
        this.$message({
          message: row.file + '移送通知书成功',
          type: 'success'
        });
      },

      zg(row){
        this.$message({
          message: row.file + ' 整改通知书打印成功',
          type: 'success'
        });
      },

      jc(row,index){
        this.tableData[index].stauts = 1
        this.$message({
          message: row.file + ' 检测报告打印成功',
          type: 'success'
        });
      },
      bj(row,index){
        this.tableData[index].bj = 2
        this.$message({
          message: row.file + ' 办结成功',
          type: 'success'
        });
      },
      qxClick(type){
        this.qx = type
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      successFun(response, file, fileList) {
        console.log(response, file, fileList);
        this.tableData.push({name: 'XXX', address: file.url, file: file.name,   stauts: 0})

      },
    }
  };
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
